<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="box" v-drag.y="true">
			
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	Vue.directive("drag",(dom,info)=>{
		//判断是否拖拽
		if(!info.value){
			return;
		}
		var dragx = info.modifiers.x;
		var dragy = info.modifiers.y;
		dom.style.position = "absolute";
		dom.onmousedown = function(e){
			var e = e||window.event;
			var disX = e.offsetX;
			var disY = e.offsetY;
			document.onmousemove = function(e){
				var e = e||window.event;
				//x轴移动
				if(dragx){
					dom.style.left = e.clientX-disX+"px";
				}
				//y轴移动
				if(dragy){
					dom.style.top = e.clientY-disY+"px";
				}
				//xy轴都移动
				if(!dragx&&!dragy){
					dom.style.left = e.clientX-disX+"px";
					dom.style.top = e.clientY-disY+"px";
				}
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}
	})
	var vm = new Vue({
		el:"#box",
		data:{
			message:"hello"
		}
	})
</script>